<template>
    <main>
        <div class="console">
            <CardList :data="cardList" />
            <MemCpu :data="memCpuList" />
            <Weather />
        </div>
    </main>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import CardList from './widget/CardList.vue';
import MemCpu from './widget/MemCpu.vue';
import Weather from './widget/Weather.vue'
import { useSocketStore } from '@/store/modules/socket';

const socketStore = useSocketStore()

let cardList = reactive({
  today: {
    total: "0", // 今日访问量
    online: "0", // 在线人数
    click: "0", // 今日点击量
    users: "0", // 这月新用户
  },
  history: {
    total: "0", // 昨日访问量
    online: "0", // 昨日最高在线人数
    click: "0", // 昨日点击量
    users: "0", // 上月新用户
  },
  total: "0", // 总访问量
  click: "0", // 总点击量
})

let memCpuList = reactive({
  mem: 0,
  cpu: [], // {usage: "", time: ""}
})

let socket = null 

onMounted(() => {
  socketStore.connect()
  socketStore.registerHandler(handleMsg)
  socketStore.clickMsgSend()
})

const handleMsg = (data) => {
  // card_list 
  cardList.click = data.cardList.click
  cardList.total = data.cardList.total
  cardList.today.click = data.cardList.today.click
  cardList.today.total = data.cardList.today.total
  cardList.today.users = data.cardList.today.users
  cardList.today.online = data.cardList.today.online
  cardList.history.click = data.cardList.history.click
  cardList.history.total = data.cardList.history.total
  cardList.history.users = data.cardList.history.users
  cardList.history.online =  data.cardList.history.online


  // mem cpu 
  memCpuList.mem = data.memCpuList.mem
  memCpuList.cpu.push({
    usage: data.memCpuList.cpu.usage, 
    time: data.memCpuList.cpu.time,
  })
  if (memCpuList.cpu.length > 20) {
    memCpuList.cpu.shift()
  }
}
</script>

<style scoped>
main {
  padding: 5px;
}
</style>